<template>
  <el-row class="tac" style="height: 100%;width: 100%;">
    <el-col style="height: 100%;width: 100%;">
      <el-menu :router="true" :unique-opened="true" :default-active="this.$router.path" class="el-menu-vertical-demo"
        @open="handleOpen" @close="handleClose">
        <div v-if="role == 1">
          <el-menu-item index="/EmailSystemPages/SendEmail/Send" @click="isLogin">
            <el-icon size="32">
              <Edit />
            </el-icon>
            <span >写信</span>
          </el-menu-item>
          <el-menu-item index="/EmailSystemPages/ReceiveEmail/Receive"  @click="isLogin" >
            <MyIcon :image-path="myHome" :size="32"></MyIcon>
            <span >收信</span>
          </el-menu-item>
          <el-menu-item index="/EmailSystemPages/AddressBook/AddressBook"  @click="isLogin">
            <!-- <MyIcon :image-path="myHome" :size="32"></MyIcon> -->
            <el-icon>
              <User />
            </el-icon>
            <span>通讯录</span>
          </el-menu-item>
          <el-menu-item index="/EmailSystemPages/draft/draft"  @click="isLogin">
            <!-- <MyIcon :image-path="myHome" :size="32"></MyIcon> -->
            <el-icon>
              <Delete />
            </el-icon>
            <span>已删除</span>
          </el-menu-item>
          <!-- <el-menu-item index="/EmailSystemPages/Addcont"> -->
          <!-- <MyIcon :image-path="myHome" :size="32"></MyIcon> -->

          <!-- <span style="font-family: ;">添加</span> -->
          <!-- </el-menu-item> -->
          <!-- <el-sub-menu index="2">
            <template #title>
              <MyIcon :image-path="myHome" :size="32"></MyIcon>
              <span>收信</span>
            </template>
            <el-menu-item index="/EmailSystemPages/Admin/register">管理员注册</el-menu-item>
            <el-menu-item index="/EmailSystemPages/Admin/AdminList">管理员列表</el-menu-item>
            <el-menu-item index="/EmailSystemPages/Admin/UserList">用户列表</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>
              <MyIcon :image-path="myHome" :size="32"></MyIcon>
              <span>算力</span>
            </template>
            <el-menu-item index="/EmailSystemPages/privateComputility/RegisterCheck">算力注册审核</el-menu-item>
            <el-menu-item index="/EmailSystemPages/privateComputility/ComputilityManage">算力管理</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="4">
            <template #title>
              <MyIcon :image-path="myHome" :size="32"></MyIcon>
              <span>电子合同</span>
            </template>
            <el-menu-item index="/EmailSystemPages/EContract/ContractManage">合同管理</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="5">
            <template #title>
              <MyIcon :image-path="myHome" :size="32"></MyIcon>
              <span>订单</span>
            </template>
            <el-menu-item index="/EmailSystemPages/Trade/TradeManage">订单管理</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="6">
            <template #title>
              <MyIcon :image-path="myHome" :size="32"></MyIcon>
              <span>数据统计</span>
            </template>
            <el-menu-item index="/EmailSystemPages/DataStatistics/Trade">订单信息</el-menu-item>
            <el-menu-item index="/EmailSystemPages/DataStatistics/ComputilityResources">算力资源</el-menu-item>
          </el-sub-menu> -->
        </div>
      </el-menu>
    </el-col>
  </el-row>
</template>

<script>
import MyIcon from "@/components/MyIcon"
import html2canvas from 'html2canvas'
export default {
  name: "VueAside",
  components: {
    MyIcon
  },
  data() {
    return {
      myHome: require('@/assets/icons/home.png'),
      role: 1
    }
  },
  methods: {
    isLogin(){
      this.$store.dispatch('user/getCurrentUser',{})
        .then(res => {
          console.log("后端返回")
          console.log(res)
        })
        .catch(error => {
          console.log(error)
          this.$message({
            type: "error",
            message: "还未登录"
          })
         // this.$router.push("/login")
        })
    },
    handleOpen(key, keyPath) {
      console.log('open:', key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log('close:', key, keyPath)
    },
    clickMenu(e) {
      console.log('click:', e["<target>"])
    },

    //截图方法
    getImg() {
      html2canvas(
        document.getElementById('superMap'),
        {
          backgroundColor: null,//画出来的图片有白色的边框,不要可设置背景为透明色（null）
          useCORS: true,//支持图片跨域
          scale: 1,//设置放大的倍数
        }
      ).then(canvas => {
        //截图用img元素承装，显示在页面的上
        let img = new Image();
        img.src = canvas.toDataURL('image/jpeg');// toDataURL :图片格式转成 base64
        document.getElementById('test').appendChild(img);

        //如果你需要下载截图，可以使用a标签进行下载
        let a = document.createElement('a');
        a.href = canvas.toDataURL('image/jpeg');
        a.download = 'test';
        a.click();
      })
    }
  }
}
</script>

<style scoped>
.el-icon-my-home {
  background-image: url("../assets/icons/home.png");
}

span {
  display: inline-block;
  font-weight: 200;
  padding: 0 4px;
  color: rgb(17, 10, 10);
  position: relative;
}
</style>
